<template>
  <div id="app-json-format">
    <a-row>
      <a-col :span="11">
        <v-jsoneditor
          v-model="inputJson" 
          :options="inputOptions" 
          :plus="false"
          @error="onError" 
        />
      </a-col>
      <a-col :span="2" style="text-align:center;height:99vh;">
        <a-button icon="right" size="large" title="格式化" style="width:60%;margin-top:30vh;" @click="toRight"/>
        <a-button icon="left" size="large" title="转文本" style="width:60%;margin-top:1vh;" @click="toLeft" />
      </a-col>
      <a-col :span="11">
        <v-jsoneditor
          v-model="formatJson" 
          :options="formatOptions" 
          :plus="false"
          @error="onError"  
        />
      </a-col>
    </a-row>
  </div>
</template>
<script>
import VJsoneditor from 'v-jsoneditor'
export default {
  components: {
    VJsoneditor
  },
  data() {
    return {
      inputJson: {
        'array': [1, 2, 3],
        'boolean': true,
        'null': null,
        'number': 123,
        'object': {'a': 'b', 'c': 'd'},
        'string': 'Hello World'
      },
      formatJson: {
        'array': [1, 2, 3],
        'boolean': true,
        'null': null,
        'number': 123,
        'object': {'a': 'b', 'c': 'd'},
        'string': 'Hello World'
      },
      inputOptions: {
        onChange: (e) => {
          console.log(e)
        },
        mode: 'code',
        enableSort: false,
        enableTransform: false,
        history: false
      },
      formatOptions: {
        onChange: (e) => {
          console.log(e)
        },
        mode: 'tree',
        search: false,
        enableSort: false,
        enableTransform: false,
        history: false
      }
    };
  },
  methods: {
    onJsonChange (value) {
      console.log('value:', value)
    },
    onJsonSave(value) {
      console.log(value)
    },
    onError (value) {
      console.log('value:', value);
    },
    toRight() {
      this.formatJson = this.inputJson
    },
    toLeft() {
      this.inputJson = this.formatJson
    }
  }
};
</script>
<style lang="less" scoped>
#app-json-format {
  padding: 0px 10px;
  text-align: left;
  width: 100%;
  /deep/ .jsoneditor-poweredBy {
    display: none!important;
  }
  /deep/ .jsoneditor-box {
    height: 99vh;
  }
  /deep/ .jsoneditor-repair {
    display: none!important;
  }
}
</style>
